/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
/* 针对WebKit和Blink内核的浏览器 */
body {
  scrollbar-width: thin; /* 滚动条宽度 */
  overflow-y: scroll; /* 总是显示垂直滚动条 */
}
 
/* 更详细的样式 */
body::-webkit-scrollbar {
  width: 12px; /* 滚动条宽度 */
}
 
body::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景颜色 */
}
 
body::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块颜色 */
}
 
body::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停在滑块上时的颜色 */
}
 
.sidebar {
    width: 200px; /* 侧边栏宽度 */
    height: 100%;
    position: fixed; /* 固定位置 */
    right: 0; /* 靠右对齐 */
    top: 0; /* 顶部对齐 */
    background-color: #f4f4f4; /* 背景颜色 */
    overflow-y: auto; /* 如果内容超出，显示滚动条 */
}
 
.content {
    margin-right: 200px; /* 右侧边距与侧边栏宽度相同，确保内容不被覆盖 */
    padding: 20px; /* 内边距 */
}


.rich-text {
    font-family: Arial, sans-serif; /* 字体 */
    font-size: 16px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    line-height: 1.5; /* 行高 */
    text-align: justify; /* 文本对齐 */
    margin: 20px 0; /* 外边距 */
}
.rich-list {
    list-style-type: square; /* 列表项样式 */
    padding-left: 20px; /* 内边距 */
}
 
.rich-link {
    color: blue; /* 链接颜色 */
    text-decoration: none; /* 去除下划线 */
}
 
.rich-link:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
.rich-text {
    background-color: #f9f9f9; /* 背景颜色 */
    border: 1px solid #ddd; /* 边框 */
    padding: 15px; /* 内边距 */
    border-radius: 5px; /* 边框圆角 */
}
.image-container {
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中对齐 */
}
 
.responsive-image {
    max-width: 100px; /* 最大宽度 */
    height: auto; /* 高度自适应 */
    margin-right: 20px; /* 与文本的间距 */
}
.rich-text {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 文字阴影 */
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* 背景渐变 */
    -webkit-background-clip: text; /* 仅文字部分应用背景色 */
    color: transparent; /* 文字透明，仅显示背景渐变效果 */
}
h1 {
    font-size: 24px;
    color: #333;
    text-align: center;
}
footer {
    background-color: #f8f9fa; /* 背景颜色 */
    color: #212529; /* 文字颜色 */
    padding: 20px; /* 内边距 */
    text-align: center; /* 文字居中 */
    position: relative; /* 相对定位 */
    bottom: 0; /* 贴底 */
    width: 100%; /* 宽度100% */
}
footer nav ul {
    list-style-type: none; /* 去除列表前的标记 */
    padding: 0; /* 去除内边距 */
}
footer nav ul li {
    display: inline; /* 使列表项水平排列 */
    margin-right: 10px; /* 右边距 */
}